<template>
  <div>
    <myDivider name="巡查详情"></myDivider>
    <el-page-header @back="$router.go(-1)"></el-page-header>
    <el-form style="margin-top: 20px;" ref="form" :model="form" label-width="220px">
      <el-form-item label="巡查码名称：">
        <span>{{ form.codeName }}</span>
      </el-form-item>
      <el-form-item label="巡查类别：">
        <span>{{ form.categoryName }}</span>
      </el-form-item>
      <el-form-item label="所属小区：">
        <span>{{ form.residentialInfo }}</span>
      </el-form-item>
      <el-form-item label="提交人：">
        <el-input disabled style="width: 250px;" v-model="form.operationUserName"></el-input>
      </el-form-item>
      <el-form-item label="巡查时间：">
        <el-input disabled style="width: 250px;" v-model="form.createTime"></el-input>
      </el-form-item>
      <el-form-item label="巡查地点：">
        <!-- <el-input disabled style="width: 250px;" v-model="form.locationName"></el-input> -->
        <el-input disabled type="textarea" v-model="form.locationName" style="width: 400px;" rows="3"></el-input>
        <span style="color: #529de6;margin-left: 10px;cursor: pointer;" @click="seeMap">查看地图</span>
      </el-form-item>
      <div v-if="form.content">
        <el-form-item v-for="item, i in form.content.content" :key="i"
          :label="`${item.title}（${item.required == 1 ? '必填' : '非必填'}）`">
          <div v-if="item.type == 'text'">
            <el-input disabled type="textarea" v-model="item.value" style="width: 400px;" rows="5"></el-input>
          </div>
          <div v-if="item.type == 'image'">
            <div style="display: flex;">
              <el-image v-for="imgItem, imgI in item.value" :key="imgI"
                style="width: 100px; height: 100px;margin-right: 10px;" :src="imgItem" :preview-src-list="[imgItem]">
              </el-image>
            </div>
          </div>
          <div v-if="item.type == 'radio'">
            <template>
              <el-radio disabled v-for="radioItem, radioI in item.radioOption" :key="radioI" v-model="item.value"
                :label="radioItem">{{ radioItem }}</el-radio>
            </template>
          </div>
        </el-form-item>
      </div>


    </el-form>
    <el-dialog title="位置信息" :visible.sync="dialogVisible" width="1000px">
      <div class="mapStyle">
        <div id="container"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
  securityJsCode: "74a9bc741a93c4984284167952f22f4a",//安全密钥
};
export default {
  data() {
    return {
      form: {},
      map: null,
      marker: null,
      geocoder: null,//编码
      AMap: null,
      dialogVisible: false,
      latLon: '',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    }
  },
  async activated() {

    let id = this.$route.query.id

    let res = await this.$api.patrol.myQrCodeScanHistoryDetail(id)
    if (res.code == 200) {
      res.data.content = JSON.parse(res.data.content)
      this.form = res.data
      this.latLon = res.data.longitude + ',' + res.data.latitude
    } else {
      this.$message.error(res.message)
    }
  },
  methods: {
    seeMap() {
      this.dialogVisible = true
      if (!this.latLon) {
        this.$message.error('缺少定位')
        return
      }
      this.$nextTick(() => {
        AMapLoader.load({
          key: "b59ffa4664995330f554d4aedc02b03c", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
          .then((AMap) => {
            this.AMap = AMap

            let mylatlot = this.latLon.split(',')
            this.map = new AMap.Map("container", {
              // viewMode: "3D", // 是否为3D地图模式
              zoom: 16, // 初始化地图级别
              center: mylatlot, // 初始化地图中心点位置
            });
            this.map.on('complete', () => { //地图加载完毕函数
              this.marker = new this.AMap.Marker({ //创建点标点
                position: mylatlot,
              });
              this.map.add(this.marker);    //添加点标点
            });
          })
          .catch((e) => {
            console.log(e);
          });


      })
    }
  }
}
</script>

<style lang="less" scoped>
.mapStyle {
  height: 350px;
  width: 100%;

  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
  }
}
</style>